<template>
  <div class="match-parent" :class="['match-parent-' + direct]">
    <div class="match-parent-inner" :class="['match-parent-' + scroll]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MatchParent',
  props: {
    direct: {
      type: String,
      default: 'col',
      validator(value) {
        return value === 'row' || value === 'col'
      }
    },
    scroll: {
      type: String,
      default: 'auto',
      validator(value) {
        const list = [
          'auto',
          'x',
          'y',
          'both'
        ]
        return list.indexOf(value) >= 0
      }
    }
  }
}
</script>

<style scoped>
.match-parent {
  flex: 1 1 1px;
  position: relative;
}
.match-parent.match-parent-row {
  height: 100%;
}
.match-parent.match-parent-col {
  width: 100%;
}
.match-parent-inner {
  position: absolute;
  width: 100%;
  height: 100%;
}
.match-parent-inner.match-parent-auto {
  overflow: auto;
}
.match-parent-inner.match-parent-x {
  overflow-x: scroll;
}
.match-parent-inner.match-parent-y {
  overflow-y: scroll;
}
.match-parent-inner.match-parent-both {
  overflow: scroll;
}
</style>
